<template>
  <div class="wuran">
      <div v-if="wuranVisiable">
        <div class="topForm">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="事件级别">
              <el-input style="width:200px" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="事件名称">
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="鹿鸣矿业" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事发时间">
              <div class="block">
                <el-date-picker
                  style="width:240px"
                  v-model="value3"
                  type="datetimerange"
                  align="right"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['12:00:00', '08:00:00']"
                ></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="涉及化学品">
              <el-button type="primary" v-model="form.name">选择</el-button>
            </el-form-item>
            <el-form-item style="position:relative; right:-100px">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="msgCards" v-if="listShow">
          <vue-scroll :ops="ops">
            <el-card class="box-card" v-for="(item ,index) in eventList" :key="index">
              <div slot="header" class="clearfix">
                <span>{{item.title}}</span>
              </div>
              <div class="cardsFlex text item">
                <div>
                  <div>
                    <div>涉及化学品：{{item.one}}</div>
                  </div>
                  <div>
                    <div>事件定级：{{item.two}}</div>
                  </div>
                </div>
                <div>
                  <div>事件时间：{{item.three}}</div>
                </div>
                <div>
                  <div>事件地点：{{item.four}}</div>
                </div>
              </div>
              <el-button
                type="primary"
                style="position:relative; right:-200px;top:-40px; padding:10px 20px;"
                @click="showDetail()"
              >操作按钮</el-button>
            </el-card>
          </vue-scroll>
        </div>
      </div>
      <div class="details" v-if="detailsVisiable">
        <vue-scroll :ops="ops">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{eventInfo.title}}</span>
            </div>
            <div class="details-content">
              <div class="content-div">
                <p class="label">事发时间：</p>
                <p>{{eventInfo.three}}</p>
              </div>
              <div class="content-div">
                <p class="label">涉及污染物：</p>
                {{eventInfo.wuran}}
              </div>
              <div class="main">
                <p class="label main-title">事件概况：</p>
                <div class="main-text-div">
                  <div
                    :class="{'main-text':textStatus=='展开','main-text-extend': textStatus=='收起'}"
                  >{{eventInfo.mainText}}</div>
                  <span @click="extendText()">{{textStatus}}</span>
                </div>
              </div>
              <div class="content-div">
                <i class="location-icon el-icon-location"></i>
                {{eventInfo.address}}
              </div>
              <div class="user-info">
                <span>
                  <i class="el-icon-s-custom"></i>
                  {{eventInfo.user.name}}
                </span>
                <span class="last">
                  <i class="el-icon-phone"></i>
                  {{eventInfo.user.phone}}
                </span>
              </div>
              <div class="tool">
                <el-checkbox>展示现场信息</el-checkbox>
              </div>
            </div>
          </el-card>
          <el-collapse class="detail-item" v-model="activeNames" >
            <el-collapse-item class="fontWeight" title="污染点" name="1">
              <el-checkbox-group v-model="checkWuran">
                <el-checkbox v-for="(item,index)  in wuranList"  :key="index" @change="handleChange" :label="item.name"></el-checkbox>
              </el-checkbox-group>
              <!-- <el-radio-group v-model="radio">
                <el-radio v-for="(item,index) in wuranList" :key="index" :label="item.num">{{item.name}}</el-radio>
              </el-radio-group> -->
            </el-collapse-item>
          </el-collapse>
          <el-card class="box-card detail-item">
            <div class="details-content">
              <p>事发行政区域: {{eventInfo.province}}</p>
              <p class="details-content-p">关联河流: {{eventInfo.river}}</p>
            </div>
          </el-card>
          <div class="bottom-tool detail-item" >
            <!-- style="display:none" -->
            <div v-for="(item,index) in eventInfo.toolList" :key="'tool' +index">
              <img :src="item.imgurl" />
              <p>{{item.name}}</p>
            </div>
          </div>
          <button @click="chanelShowDetail()" class="chanelBtn">退出本次事件</button>
        </vue-scroll>
      </div>
    
  </div>
</template>

<script>
const wuranArr  = [[128.531811,47.348694],[128.508863,47.342319],[128.49652,47.333252],[128.490621,47.322814],[128.4914,47.316227],[128.484205,47.310754]]
const positionsArr  = [[128.531811,47.348694],[128.508863,47.342319],[128.49652,47.333252],[128.490621,47.322814],[128.4914,47.316227],[128.484205,47.310754]]
const checkedPics = [
    "./data/icon/shui.png",
    "./data/icon/yin.png",
    "./data/icon/bao.png",
    "./data/icon/yin.png",
    "./data/icon/shui.png",
    "./data/icon/ku.png",
]
const checkedPic = {"水源地":checkedPics[0],"自来水厂":checkedPics[1],"自然保护区":checkedPics[2],"水质自动站":checkedPics[3],"河道站水情":checkedPics[4],"水库站水情":checkedPics[5]};
const checkedPosition={"水源地":positionsArr[0],"自来水厂":positionsArr[1],"自然保护区":positionsArr[2],"水质自动站":positionsArr[3],"河道站水情":positionsArr[4],"水库站水情":positionsArr[5]};
const luming = new Cesium.WebMapServiceImageryProvider({
                url: `http://192.168.4.70:8310/tilecache/service/wms`,
                layers: 'lumRH1_1-PNG-4326',
                parameters: {
                    format: 'image/png'
                },
                srs: 'EPSG:4326'
            });
const hulan = new Cesium.WebMapServiceImageryProvider({
                url: `http://192.168.4.70:8310/tilecache/service/wms`,
                layers: 'hlhRH1_1-PNG-4326',
                parameters: {
                    format: 'image/png'
                },
                srs: 'EPSG:4326'
            });
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        labelPosition: "top",
      },
      listShow:false,
      activeNames: ['1'],
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {},
        bar: {},
      },
      radio:0,
      value3: "",
      eventList: [
        {
          title: "伊春鹿鸣矿业尾矿库泄漏事件",
          one: "钼",
          two: "待定",
          three: "2020-03-28",
          four: "黑龙江省伊春市铁力市",
        },
        {
          title: "测试-污水处理厂",
          one: "苯",
          two: "待定",
          three: "2020-07-27",
          four: "北京市市县辖区通州区",
        },
        {
          title: "测试-北京通州汽油罐车泄露事故",
          one: "苯",
          two: "待定",
          three: "2020-07-27",
          four: "北京市市县辖区通州区",
        },
      ],
      wuranVisiable: true,
      detailsVisiable: false,
      eventInfo: {
        title: "黑龙江伊春鹿鸣矿业尾矿库溢流事故",
        three: "2020-07-27",
        wuran: "钼",
        mainText:
          "2020年3月28日13时40分许，伊春鹿鸣矿业有限公司钼矿尾矿库4号溢流井发生倾斜，导致泄水量增多并伴有尾矿砂，对水环境造成污染。截至2020年4月11日3时，该事故超标污水团流至呼兰河下游，在距离松花江约70公里处全面达标，呼兰河全线已基本复清。2020年4月20日，该事故次生突发环境事件联合调查工作启动。事故发生后，生态环境部第一时间派出工作组赶赴现场，与地方一起迅速开展应急处置工作。2020年4月20日，生态环境部、应急管理部和黑龙江省人民政府启动伊春鹿鸣矿业“3·28”尾矿库泄漏事故次生突发环境事件联合调查工作。调查报告将向社会公开。生态环境部负责人表示，调查组将遵循实事求是、客观公正、权责一致原则，彻查事件过程，确认事件性质，提出防范和整改措施建议以及处理意见，切实强化环境风险防控。",
        address: "北京市市县辖区通州区",
        province: "黑龙江省伊春市铁力市",
        river: "伊吉密河",
        user: {
          name: "王海路",
          phone: "15568745154",
        },
        toolList: [
          {
            imgurl: "/data/tool/电话.jpg",
            name: "通讯录",
          },
          {
            imgurl: "/data/tool/化学品.jpg",
            name: "化学品信息",
          },
          {
            imgurl: "/data/tool/案例.jpg",
            name: "相关案例",
          },
          {
            imgurl: "/data/tool/专家团队.jpg",
            name: "专家队伍",
          },
          {
            imgurl: "/data/tool/电话.jpg",
            name: "信息报告",
          },
          {
            imgurl: "/data/tool/物资库.jpg",
            name: "周边物资库",
          },
        ],
      },
      textStatus: "展开",
      wuranList: [
        { name: "鹿鸣矿业钼矿尾矿库"},
        //{ name: "依吉密河与呼兰河交界处"},
        { name: "污染重现"},
        { name: "呼兰河安庆县段"}
      ],
      checkWuran: [],
      spllitHandler:null,
    };
  },
  methods: {
    handleChange(r,o){
      
      if(r){
        let name = o.target.defaultValue;
        this.checkWuran = [];
        this.checkWuran.push(name)
        this.removeSplit()
        viewer.graphicLayer.clear()
        viewer.entities.removeAll()
        if(oneTimer){
          clearInterval(oneTimer)
          window.oneTimer = null;
        }
        if(twoTimer){
            clearTimeout(twoTimer)
            window.twoTimer = null;
        }

        if(name=="鹿鸣矿业钼矿尾矿库"){
          this.$cp.flyTo(128.4482726156792,47.275779796124866,8339,0.6866745485954739,-0.6060207561936806,0.002587597852949486)
          this.splitLayer(luming)
        }
        else if(name=="呼兰河安庆县段"){
          this.$cp.flyTo(127.40363117501514,46.901239838086674,3900,0.6866742964759958,-0.6060203124024279,0.002588040477529141)
          this.splitLayer(hulan)
        }
        else if(name=="污染重现"){
          
          this.$cp.flyTo(128.57719646064962,47.34350046413692,2227,4.948949225268665,-0.3361543198377477,6.279736526614844)
          
          this.$cp.addBillboard1( "qidian" , [128.546129,47.344913], "./data/icon/qi.png" , "红旗岗沟" , "leftClick", this.entityLeftClick) 
          window.twoTimer = setTimeout(()=>{
            this.wuranPath()
          },3000)
        }
      }else{
        if(oneTimer){
          clearInterval(oneTimer)
          window.oneTimer = null;
        }
        if(twoTimer){
            clearTimeout(twoTimer)
            window.twoTimer = null;
        }
        this.checkWuran = [];
        this.removeSplit()
        viewer.entities.removeAll()
        viewer.scene.preUpdate.removeEventListener(trackedEntity)
        viewer.graphicLayer.clear()
        
      }
      
    },
    removeSplit(){
        var slider = document.getElementById("slider");
        slider.style.display = "none";
        if(this.spllitHandler){
          this.spllitHandler.destroy();
        }
        if(this.layerSplit){
          this.layerSplit.splitDirection = Cesium.ImagerySplitDirection.NONE; 
          this.layerSplit.show = false
          viewer.imageryLayers.remove(this.layerSplit)
         
        }
    },
    splitLayer(option){
        var layers = viewer.imageryLayers;
        this.layerSplit = layers.addImageryProvider(
            option
        );
        this.layerSplit.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.
        // Sync the position of the slider with the split position
        var slider = document.getElementById("slider");
        slider.style.display = "block";
        viewer.scene.imagerySplitPosition =
        slider.offsetLeft / slider.parentElement.offsetWidth;

        var handler = new Cesium.ScreenSpaceEventHandler(slider);
        this.spllitHandler = handler;
        var moveActive = false;

        function move(movement) {
            if (!moveActive) {
                return;
            }
            var relativeOffset = movement.endPosition.x;
            var splitPosition =
                (slider.offsetLeft + relativeOffset) /
                slider.parentElement.offsetWidth;
            slider.style.left = 100.0 * splitPosition + "%";
            viewer.scene.imagerySplitPosition = splitPosition;
        }

        handler.setInputAction(function () {
            moveActive = true;
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

        handler.setInputAction(function () {
            moveActive = true;
        }, Cesium.ScreenSpaceEventType.PINCH_START);

        handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

        handler.setInputAction(function () {
            moveActive = false;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);

        handler.setInputAction(function () {
            moveActive = false;
        }, Cesium.ScreenSpaceEventType.PINCH_END);
    },
    onSubmit() {
      if(!this.form.region){
        this.$message({
          message: '请选择事件名称',
          type: 'warning'
        });
      }else{
        this.listShow = true;
      }
      
    },
    hiddenTufa() {},
    hiddenInfoBox() {},
    extendText() {
      if (this.textStatus == "收起") {
        this.textStatus = "展开";
      } else {
        this.textStatus = "收起";
      }
    },
    showDetail() {
      this.wuranVisiable = false;
      this.detailsVisiable = true;
    },
    chanelShowDetail() {
      this.wuranVisiable = true;
      this.detailsVisiable = false;
    },
    changeWuran() {},
    entityLeftClick(entity){
      this.$cp.currentEntity = entity;
      entity.label.show=true;
    },
    wuranPath(){
      for(let key in checkedPosition){
        this.$cp.addBillboard( "fuxian" + key , checkedPosition[key], checkedPic[key] , key, "moveMove", this.entityLeftClick) 
      }
     
      let allPositions = [];
      axios.get('./data/污染河段.json').then(res=>{
        let datas = res.data.coordinates;
        datas.forEach((element ,index)=> {
            allPositions.push(element)
        });
        let allPositions1 = []//所有路径
        allPositions1 = [].concat.apply([], allPositions)
        this.addManyou1(allPositions1)
      })
    },
    addManyou(thisPathPositions){

      let that = this;
      let positionsArr = [];
      let curTime = 0;
        let hosipitalShipPositon = [];
        const shipGroup = new GV.GraphicGroup();
        this.$cp.viewer.graphicLayer.add(shipGroup);
        
        let shipUnit = new GV.ModelGraphic({
            url: "./data/Cesium_Air.glb",
            position: new GV.GeoPoint(98.876222,25.68233,10000),
            scale: 0,
            clampToGround: false,
            heading: -15,
            pitch: 0
        });
        shipGroup.add(shipUnit);

        thisPathPositions.forEach((item,index)=>{
            let itemA = {
                lon:item[0],
                lat:item[1],
                alt:1000
            }
            hosipitalShipPositon.push(itemA)
        })
        // const hosipitalShipPositon = new GV.Calculate.getBezier([shipGroup.children[1].position, { lon: 123.7979348613, lat: 26.9372833592, alt: 0 }, { lon: 125.3472385110, lat: 28.5239795345, alt: 0 }, { lon: 127.7541276253, lat: 32.0475495456, alt: 0 }], 20);
        const hosipitalShipPositonsInfo = [];
        let time = 0;
        for (const pointo of hosipitalShipPositon) {
            hosipitalShipPositonsInfo.push({ point: pointo, time: time });
            time += .5;
        }
        const hosipitalShipPath = new GV.Path(this.$cp.viewer);
        hosipitalShipPath.speed = 0.01;
        hosipitalShipPath.pathPositions = hosipitalShipPositonsInfo;
        time = 0;
        //回调函数加时间返回对应的医疗船模型的位置和姿态
        hosipitalShipPath.callback = (position, heading, pitch, roll) => {
            shipGroup.children[0].position = position;
            shipGroup.children[0].heading = heading;
            shipGroup.children[0].pitch = pitch;
            shipGroup.children[0].roll = roll;
            //console.log(shipGroup.children[0].position)
        }
        let shipEntity = shipGroup.children[0];
        hosipitalShipPath.start();
        
        
        function _getCurrent(time){
          let center = shipEntity.getRenderObject().renderObj.position.getValue(time);
          let lonLat = Cesium.Cartographic.fromCartesian(center);
          let centerLon = lonLat.longitude / Math.PI * 180;
          let centerLat = lonLat.latitude / Math.PI * 180;
          let height = 100;
          positionsArr.push(parseFloat(centerLon), parseFloat(centerLat));
          curTime++;
          // 去掉第一个点
          if(curTime==1){
            positionsArr.splice(0,3);
          }
          //然后去重，避免所有异常
          //console.log(positionsArr)
          return Cesium.Cartesian3.fromDegreesArray(positionsArr);
        }
        viewer.entities.add({
          //动态路径
          position: Cesium.Cartesian3.fromDegrees(128.54613320665,47.344898714673),
          polyline: {
            positions: new Cesium.CallbackProperty(_getCurrent, false),
            loop: false,
            clampToGround: true,
            width: 25,
            material: Cesium.Color.GOLDENROD ,
          }
        })
        //出现扩散波
        setInterval(()=>{
            let center = shipEntity.getRenderObject().renderObj.position.getValue(viewer.clock.currentTime);
            //console.log(shipEntity.getRenderObject().renderObj.orientation.getValue(viewer.clock.currentTime));
            
            let lonLat = Cesium.Cartographic.fromCartesian(center);
            let centerLon = lonLat.longitude / Math.PI * 180;
            let centerLat = lonLat.latitude / Math.PI * 180;
            let point = new GV.GeoPoint(centerLon,centerLat, 500);
            
            if (GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[0][0], wuranArr[0][1]), 2000)) {
              if(!circleScan1){
                circleScan1 = new GV.SpreadGraphic({
                    spreadColor: 'rgba(255,0.0, 0.0,1)',
                    position: new GV.GeoPoint(wuranArr[0][0], wuranArr[0][1]),
                    radius: 6000,
                    duration: 3000,
                });
                viewer.graphicLayer.add(circleScan1);
              }
              
            }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[1][0], wuranArr[1][1]), 2000)){
              if(!circleScan2){
                circleScan2 = new GV.SpreadGraphic({
                    spreadColor: 'rgba(255,0.0, 0.0,1)',
                    position: new GV.GeoPoint(wuranArr[1][0], wuranArr[1][1]),
                    radius: 6000,
                    duration: 3000,
                });
                viewer.graphicLayer.add(circleScan2);
              }
            }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[2][0], wuranArr[2][1]), 2000)){
              if(!circleScan3){
                circleScan3 = new GV.SpreadGraphic({
                    spreadColor: 'rgba(255,0.0, 0.0,1)',
                    position: new GV.GeoPoint(wuranArr[2][0], wuranArr[2][1]),
                    radius: 6000,
                    duration: 3000,
                });
                viewer.graphicLayer.add(circleScan3);
              }
            } else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[3][0], wuranArr[3][1]), 2000)){
              if(!circleScan4){
                circleScan4 = new GV.SpreadGraphic({
                    spreadColor: 'rgba(255,0.0, 0.0,1)',
                    position: new GV.GeoPoint(wuranArr[3][0], wuranArr[3][1]),
                    radius: 6000,
                    duration: 3000,
                });
                viewer.graphicLayer.add(circleScan4);
              }
            }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[4][0], wuranArr[4][1]), 2000)){
              if(!circleScan5){
                circleScan5 = new GV.SpreadGraphic({
                    spreadColor: 'rgba(255,0.0, 0.0,1)',
                    position: new GV.GeoPoint(wuranArr[4][0], wuranArr[4][1]),
                    radius: 6000,
                    duration: 3000,
                });
                viewer.graphicLayer.add(circleScan5);
              }
            }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[5][0], wuranArr[5][1]), 2000)){
              if(!circleScan6){
                circleScan5 = new GV.SpreadGraphic({
                    spreadColor: 'rgba(255,0.0, 0.0,1)',
                    position: new GV.GeoPoint(wuranArr[5][0], wuranArr[5][1]),
                    radius: 6000,
                    duration: 3000,
                });
                viewer.graphicLayer.add(circleScan5);
              }
            }
        },10)
        //let currentCenter = shipEntity.getRenderObject().renderObj.position.getValue(viewer.clock.currentTime);
        let trackedEntity = function (){
             let center = shipEntity.getRenderObject().renderObj.position.getValue(viewer.clock.currentTime);
            //console.log(shipEntity.getRenderObject().renderObj.orientation.getValue(viewer.clock.currentTime));
            
            let lonLat = Cesium.Cartographic.fromCartesian(center);
            let centerLon = lonLat.longitude / Math.PI * 180;
            let centerLat = lonLat.latitude / Math.PI * 180;
            viewer.camera.setView({
                // destination:Cesium.Cartesian3.fromDegrees(lonLat.longitude / Math.PI * 180, lonLat.latitude / Math.PI * 180  ,70000),
                // orientation:{
                //   heading: shipEntity.heading,
                //     pitch: Cesium.Math.toRadians(90),
                //     roll: 0
                // }
                //4000=.06,2000=.03 , 1000=.01
                destination:Cesium.Cartesian3.fromDegrees(centerLon , centerLat + .01 ,1000),
                orientation:{
                    heading:Cesium.Math.toRadians(0),
                    pitch:Cesium.Math.toRadians(-150),
                    roll:Cesium.Math.toRadians(-180)
                }
            })
        }
        //viewer.scene.preUpdate.addEventListener(trackedEntity)
        //setTimeout(()=>{viewer.scene.preUpdate.removeEventListener(trackedEntity)},20000)
    },
    addManyou1(thisPathPositions){

      var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
      var stop = Cesium.JulianDate.addSeconds(start, thisPathPositions.length*10, new Cesium.JulianDate());
      viewer.shouldAnimate=true;
      //viewer.animation=true;
      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = stop.clone();
      viewer.clock.currentTime = start.clone();
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      viewer.clock.multiplier = 3;
      //viewer.timeline.zoomTo(start, stop);
      let result = [];
      let pathEntity = null;
      for (let p = 0; p < thisPathPositions.length; p++) {
        const d = {
          fLongitude: thisPathPositions[p][0],
          fLatitude: thisPathPositions[p][1]
        };
        result.push(d);
      }
      let positionsArr = [];
      // 飞行速度，值越大速度越快，multiplier为0停止移动
      viewer.clock.multiplier = 5;
      // 计算飞行时间和位置
      function computeFlight(start, positions) {
        const property = new Cesium.SampledPositionProperty();
        for (let i = 0; i < positions.length; i++) {
          const time = Cesium.JulianDate.addSeconds(
            start,
            i * 10,
            new Cesium.JulianDate()
          );
          const position = Cesium.Cartesian3.fromDegrees(
            parseFloat(positions[i].fLongitude),
            parseFloat(positions[i].fLatitude)
          );
          //Cesium.Math.nextRandomNumber() * 500 + 1750
          property.addSample(time, position);
        }
        return property;
      }
      const property = computeFlight(start, result);

      function _getCurrent(time) {
          var cartesian = pathEntity.position.getValue(time);
          var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
            cartesian
          );
          var point = [
            (cartographic.longitude / Math.PI) * 180,
            (cartographic.latitude / Math.PI) * 180,
          ];
          let x = point[0].toFixed(10);
          let y = point[1].toFixed(10);
          positionsArr.push(parseFloat(x), parseFloat(y));

          // if (positionsArr.length > 1500) {
          //   positionsArr = positionsArr.slice(positionsArr.length - 1500); //此处必须为3的整数倍,解决闭合问题，闭合使用去重
          //   let result = [];
          //   let obj = {};
          //   for (let i of positionsArr) {
          //     if (!obj[i]) {
          //       result.push(i);
          //       obj[i] = 1;
          //     }
          //   }
          //   return Cesium.Cartesian3.fromDegreesArrayHeights(result);
          // }
          return Cesium.Cartesian3.fromDegreesArray(positionsArr);
      }
      pathEntity = viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: start,
            stop: stop,
          }),
        ]),
        position: property,
        orientation: new Cesium.VelocityOrientationProperty(property), // 根据位置移动自动计算方向
        //动态路径
        polyline: {
          positions: new Cesium.CallbackProperty(_getCurrent, false),
          loop: false,
          width: 10,
          material: Cesium.Color.TURQUOISE,
          clampToGround: true,
        }
      });
      // 设置插值函数为拉格朗日算法
      pathEntity.position.setInterpolationOptions({
        interpolationDegree: 50,
        //interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
        interpolationAlgorithm: Cesium.LinearApproximation,
      });
      //出现扩散波
      window.circleScan1 = null;
      window.circleScan2 = null;
      window.circleScan3 = null;
      window.circleScan4 = null;
      window.circleScan5 = null;
      window.circleScan6 = null;
      window.oneTimer = setInterval(()=>{
         let center = pathEntity.position.getValue(viewer.clock.currentTime);
            //console.log(shipEntity.getRenderObject().renderObj.orientation.getValue(viewer.clock.currentTime));
            let lonLat = Cesium.Cartographic.fromCartesian(center);
            let centerLon = lonLat.longitude / Math.PI * 180;
            let centerLat = lonLat.latitude / Math.PI * 180;
            let point = new GV.GeoPoint(centerLon,centerLat, 500);
          
          if (GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[0][0], wuranArr[0][1]), 2000)) {
            if(!circleScan1){
              circleScan1 = new GV.SpreadGraphic({
                  spreadColor: 'rgba(255,0.0, 0.0,1)',
                  position: new GV.GeoPoint(wuranArr[0][0], wuranArr[0][1]),
                  radius: 1000,
                  duration: 3000,
              });
              viewer.graphicLayer.add(circleScan1);
            }
            
          }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[1][0], wuranArr[1][1]), 2000)){
            if(!circleScan2){
              circleScan2 = new GV.SpreadGraphic({
                  spreadColor: 'rgba(255,0.0, 0.0,1)',
                  position: new GV.GeoPoint(wuranArr[1][0], wuranArr[1][1]),
                  radius: 1000,
                  duration: 3000,
              });
              viewer.graphicLayer.add(circleScan2);
            }
          }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[2][0], wuranArr[2][1]), 2000)){
            if(!circleScan3){
              circleScan3 = new GV.SpreadGraphic({
                  spreadColor: 'rgba(255,0.0, 0.0,1)',
                  position: new GV.GeoPoint(wuranArr[2][0], wuranArr[2][1]),
                  radius: 1000,
                  duration: 3000,
              });
              viewer.graphicLayer.add(circleScan3);
            }
          } else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[3][0], wuranArr[3][1]), 2000)){
            if(!circleScan4){
              circleScan4 = new GV.SpreadGraphic({
                  spreadColor: 'rgba(255,0.0, 0.0,1)',
                  position: new GV.GeoPoint(wuranArr[3][0], wuranArr[3][1]),
                  radius: 1000,
                  duration: 3000,
              });
              viewer.graphicLayer.add(circleScan4);
            }
          }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[4][0], wuranArr[4][1]), 2000)){
            if(!circleScan5){
              circleScan5 = new GV.SpreadGraphic({
                  spreadColor: 'rgba(255,0.0, 0.0,1)',
                  position: new GV.GeoPoint(wuranArr[4][0], wuranArr[4][1]),
                  radius: 1000,
                  duration: 3000,
              });
              viewer.graphicLayer.add(circleScan5);
            }
          }else if(GV.Calculate.pointInCircle(point, new GV.GeoPoint(wuranArr[5][0], wuranArr[5][1]), 2000)){
            if(!circleScan6){
              circleScan6 = new GV.SpreadGraphic({
                  spreadColor: 'rgba(255,0.0, 0.0,1)',
                  position: new GV.GeoPoint(wuranArr[5][0], wuranArr[5][1]),
                  radius: 1000,
                  duration: 3000,
              });
              viewer.graphicLayer.add(circleScan6);
            }
          }
      },10)
      window.trackedEntity = function (){
             let center = pathEntity.position.getValue(viewer.clock.currentTime);
            //console.log(shipEntity.getRenderObject().renderObj.orientation.getValue(viewer.clock.currentTime));
            
            let lonLat = Cesium.Cartographic.fromCartesian(center);
            let centerLon = lonLat.longitude / Math.PI * 180;
            let centerLat = lonLat.latitude / Math.PI * 180;
            
            viewer.camera.setView({
                // destination:Cesium.Cartesian3.fromDegrees(lonLat.longitude / Math.PI * 180, lonLat.latitude / Math.PI * 180  ,70000),
                // orientation:{
                //   heading: shipEntity.heading,
                //     pitch: Cesium.Math.toRadians(90),
                //     roll: 0
                // }
                //4000=.06,2000=.03 , 1000=.01
                destination:Cesium.Cartesian3.fromDegrees(centerLon , centerLat + .06 ,4000),
                orientation:{
                    heading:Cesium.Math.toRadians(0),
                    pitch:Cesium.Math.toRadians(-150),
                    roll:Cesium.Math.toRadians(-180)
                }
            })
        }
        viewer.scene.preUpdate.addEventListener(trackedEntity)
        setTimeout(()=>{viewer.scene.preUpdate.removeEventListener(trackedEntity)},60000)
    }
  },
};
</script>

<style lang="stylus" scoped>
@import '../../../../assets/css/varibles.styl';

.wuran >>> .cardsFlex>div {
  line-height: 30px;
}

.wuran >>> .cardsFlex {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wuran >>> .el-card__body {
  //height: 120px;
}

.wuran >>> .el-form-item .el-form-item__label {
  width: 100px !important;
}

.wuran >>> .keyItem {
  margin-top: 20px;
}

.wuran >>> .keyItem {
  border: 1px solid #f00;
  display: flex;
}

.wuran >>> .keyItemLeft {
  flex: 2;
  background: #D9F1F9;
}

.wuran >>> .keyItemRight {
  flex: 6;
}

.wuran >>> .searchItem {
  display: flex;
}
.details{
  width:vw(362)
  padding-right:10px;
  height:vh(995)
}
.details >>> .box-card{
  
}
.wuran {
  color: #000;
  background: #fff;
  padding: 19px;
  padding-top: 0;
  position: relative;
  height:calc(100% - 55px)
  cursor: pointer;
  .chanelBtn {
    width: 112px;
    height: 50px;
    font-size: 16px;
    border: 1px solid rgb(219, 219, 219);
    background-color: white;
    float: right;
  }

  .BoundInfoBox {
    display: none;
    // position:fixed
    // right:1000px
    .infoBox-class {
      width: vw(290);
      height: vh(200);
      display: none;
      position: fixed;
      color: #fff;
      background: rgba(0, 13, 22, 0.5);
      box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
      border: 1px solid rgba(127, 255, 255, 0.25);
      text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
      z-index: 10;

      .close {
        position: absolute;
        top: 2px;
        right: 2px;
        cursor: pointer;
      }
    }
  }

  .msgCards {
    height: vh(600);
    width:vw(400);
  }
  .msgCards >>> .box-card{
    width:vw(360)
  }
  .details {
    .el-card__body {
      overflow: auto;
      max-height: vh(500);
    }

    .detail-item {
      margin-top: vh(30);
    }

    .bottom-tool {
      height: vh(200);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      margin-top: vh(30);
      div {
        display: flex;
        align-items: center;
        img {
          width: vw(49);
          height: vw(49);
        }
      }
    }

    .details-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .details-content-p {
        font-size: vw(16);
        margin-top: vh(30);
      }
      .content-div {
        display: flex;
        margin-top: vh(20);
      }
      .label {
        width: vw(100);
      }
      .main {
        display: grid;
        grid-template-columns: 1fr 3fr;
        margin-top: vh(20);
        .main-title{
        }
        .main-text-div {
          display: flex;
          flex-direction: column;
          span {
            color: rgb(0, 171, 197);
            text-align: right;
            cursor: pointer;
          }
        }

        .main-text {
          width: vw(220);
          line-height: 25px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box; // 作为弹性伸缩盒子模型显示。
          -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
          -webkit-line-clamp: 4; // 显示的行
        }

        .main-text-extend {
          width: vw(220);
          line-height: 25px;
        }
      }

      .location-icon {
        margin: vw(0) vw(10) vw(0) vw(0);
      }

      .user-info {
        margin-top: vh(20);

        .last {
          margin: vw(0) vw(0) vw(0) vw(100);
        }
      }

      .tool {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: vh(20);
        .el-checkbox__label {
          font-size: 16px;
        }
      }
    }
  }
}
</style>